/**
 * 上传图片
 * @name top-upload-img
 */
Vue.component('top-upload-img', {
    template: `
        <el-upload 
            :list-type="type=='img'?'picture-card':''"
            :drag="type=='img'?false:true"
            :action="uploadUrl"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="onSuccess"
            :on-error="onError"
            :on-exceed="onExceed"
            :file-list="fileList"
            :limit="limit"
            :accept="accept"
            :multiple="multiple">
            <i class="el-icon-plus" v-if="type=='img'"></i>
            <i class="el-icon-upload" v-else></i>
            <div class="el-upload__text" v-else>将文件拖到此处，或<em>点击上传</em></div>

            <div class="el-upload__tip" slot="tip">{{tip}}</div>
            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img v-if="type=='img'" width="100%" :src="dialogImageUrl" alt="">
              <video v-else controls class="video-box">
                    <source :src="dialogImageUrl" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </el-dialog>
        </el-upload>
        
    `,

    props: {
        value: { type: Array, default: () => [] },
        multiple: { type: Boolean, default: false },
        accept: { type: String, default: '.jpg,.jpeg,.png' },
        limit: { type: Number, default: 6 },
        tip: { type: String, default: '最多上传6张图片，格式为png,jpeg,jpg' },
        type: {
            type: String,
            default: 'img',
        },
    },

    data() {
        return {
            fileList: [], // 用于存储已上传的照片列表
            dialogVisible: false,
            dialogImageUrl: '',
        };
    },

    computed: {
        uploadUrl() {
            return `${GLOBAL_CONFIG.getVirtualPath()}/assist/upload`;
        },
    },

    watch: {
        value: {
            handler(v) {
                if (v) {
                    this.fileList = v;
                }
            },
            immediate: true,
            deep: true,
        },
    },

    methods: {
        /**
         * 图片上传成功
         */
        onSuccess(res, file, fileList) {
            this.fileList = fileList;
            console.log(fileList);
            this.$emit('input', fileList);
        },

        /**
         * 上传失败
         */
        onError(err) {
            this.$message.warning('文件上传失败');
        },

        /**
         * 上传超出限制钩子
         */
        onExceed(files, fileList) {
            this.$message.warning('文件上传超出限制');
        },

        handleRemove(file, fileList) {
            this.fileList = fileList;
            this.$emit('input', fileList);
        },

        handlePictureCardPreview(file) {
            if (this.type == 'video') {
                this.dialogImageUrl = file.url || file.response.data;
            } else {
                this.dialogImageUrl = file.url;
            }
            this.dialogVisible = true;
        },
    },
});
